<template>
    <div>
        <!-- <el-button type="primary" :icon="Plus" @click="emit('update:modelValue', STATUS.SPUFORM)">添加SPU</el-button>
        <el-button type="primary" :icon="Plus" @click="emit('update:modelValue', STATUS.SKUFORM)">添加SKU - 假的</el-button> -->
        <el-button class="mb-10" type="primary" :icon="Plus" @click="emit('update:modelValue', STATUS.SPUFORM)"
            :disabled="!categoryStore.category3Id">添加SPU</el-button>
        <el-table :data="spuList" border>
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description"></el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="{ row, $index }">
                    <el-button type="success" size="small" :icon="Plus" title="新增SKU" @click="addSku(row)"></el-button>
                    <el-button type="warning" size="small" :icon="Edit" title="修改SPU" @click="editSpu(row)"></el-button>
                    <el-button type="info" size="small" :icon="InfoFilled" title="查看SKU列表"
                        @click="showSkuList(row)"></el-button>
                    <el-popconfirm :title="`确认要删除[${row.spuName}]吗?`" @confirm="deleteSpu(row)">
                        <template #reference>
                            <el-button type="danger" size="small" :icon="Delete" title="删除SPU"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="page" v-model:page-size="limit" :total="total" :page-sizes="[3, 6, 9]"
            layout="prev, pager, next, jumper, ->, sizes, total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="80%">
            <el-table :data="skuList" stripe>
                <el-table-column label="名称" prop="skuName" />
                <el-table-column label="价格" prop="price" />
                <el-table-column label="重量" prop="weight" />
                <el-table-column label="默认图片">
                    <template #default="{ row, $index }">
                        <img :src="row.skuDefaultImg" style="width: 60px;height: 60px;">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>
  
<script setup lang="ts">
import skuApi, { type SkuModel } from '@/api/sku'
import spuApi, { type SpuModel } from '@/api/spu'
import { Delete, Edit, Plus, InfoFilled } from '@element-plus/icons-vue'
import { STATUS } from '../../index.vue'
import { ref, watch } from 'vue';
import useCategoryStore from '@/stores/category';
import { ElMessage } from 'element-plus';
const categoryStore = useCategoryStore();

const emit = defineEmits<{
    (e: 'update:modelValue', status: number): void,
    (e: 'changeSpuInfo', spu: SpuModel): void
}>()
const editSpu = (row: SpuModel) => {
    emit('update:modelValue', STATUS.SPUFORM); // 切换界面
    emit('changeSpuInfo', row)
}

// 删除SPU
const deleteSpu = async (row: SpuModel) => {
    try {
        await spuApi.deleteSpu(row.id!);
        ElMessage.success('删除成功')
        getPage();
    } catch (error) {
        ElMessage.error('删除失败')
    }
}


// 查看SKU列表
const dialogTitle = ref('')// dialog的标题
const dialogVisible = ref(false); // 控制 dialog 显示隐藏
const skuList = ref<SkuModel[]>([]) // dialog中 table 显示的数据
const showSkuList = async (row: SpuModel) => {
    try {
        let result = await skuApi.findBySpuId(row.id!);
        skuList.value = result;
        dialogVisible.value = true; // 显示 dialog
        dialogTitle.value = `[${row.spuName}]的SKU列表`
    } catch (error) {
        ElMessage.error('获取sku列表失败,请重试')
    }
}



// 新增Sku
const addSku = (row: SpuModel) => {
    emit('update:modelValue', STATUS.SKUFORM)
    emit('changeSpuInfo', row); // 把当前的spu传给父组件
}
// 列表展示数据
const spuList = ref<SpuModel[]>([])

const getPage = async () => {
    try {
        let result = await spuApi.getPage(page.value, limit.value, categoryStore.category3Id as number);
        spuList.value = result.records;

        total.value = result.total;
    } catch (error) {
        ElMessage.error('获取Spu列表数据失败,请重试')
    }
}

const page = ref(1)
const limit = ref(3)
const total = ref(0)
const handleSizeChange = (val: number) => {
    // 组装数据
    limit.value = val;
    // 发送请求
    getPage();
}
// 翻页的回调
const handleCurrentChange = (val: number) => {
    // 组装数据
    page.value = val;
    // 发送请求
    getPage();
}
watch(() => categoryStore.category3Id, (nval) => {
    if (nval) {
        getPage()
    } else {
        // 重置表格数据
        spuList.value = [];
    }
}, { immediate: true })
</script>
  
<style scoped>

</style>